<template>
	<el-card shadow="none" header="学习活跃度" v-loading="loading">
		<scEcharts ref="c1" height="460px" :option="option"></scEcharts>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';

	export default {
		title: "统计",
		icon: "el-icon-data-line",
		description: "Echarts",
		props: {
			echartsData: {
				type: Array,
				default: () => []
			}
		},
		components: {
			scEcharts
		},
		data() {
			return {
				loading: true,
				option: {}
			}
		},
		created() {
			var _this = this;
			setTimeout(function() {
				_this.loading = false
			}, 500);
			this.init();
		},
		watch: {
			echartsData(){
				this.init()
			}
		},
		mounted(){
			
		},
		methods: {
			init(){
				let data1 = []
				let data2 = []
				if(this.echartsData){
					data1 = this.echartsData.map(item => { return item.label })
					data2 = this.echartsData.map(item => { return item.time })
				}
				var option = {
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						boundaryGap: false,
						type: 'category',
						data: data1
					},
					yAxis: [{
						type: 'value',
						"splitLine": {
							"show": true
						},
						axisLabel: {
							formatter: function (value) {
								return value;
							}
						}
					}],
					series: [
						{
							name: '学习时长',
							type: 'line',
							symbol: 'none',
							lineStyle: {
								width: 1,
								color: '#409EFF'
							},
							areaStyle: {
								opacity: 0.1,
								color: '#79bbff'
							},
							data: data2
						},
					],
				};
				this.option = option;
			}
		}
	}
</script>
